﻿<UserControl x:Class="Indigo.Quibbler.Controls.ArticleGalleryControl"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:controls="clr-namespace:Indigo.Quibbler.Controls"
    Height="Auto" Width="Auto">
    <UserControl.Resources>
        <Style TargetType="{x:Type ListBox}">
            <Setter Property="ItemTemplate">
                <Setter.Value>
                    <DataTemplate>
                        <controls:ArticleGalleryNode x:Name="articleControl" ImageUrl="{Binding ImageUrl}" Headline="{Binding Headline}" SubHeadline="{Binding SubHeadline}" PubDate="{Binding PubDate}" SyncTime="{Binding SyncTime}"  Width="160" Height="120" HorizontalAlignment="Center" VerticalAlignment="Stretch" Margin="5">
                        </controls:ArticleGalleryNode>
                    </DataTemplate>
                </Setter.Value>
            </Setter>
            <Setter Property="ItemsPanel">
                <Setter.Value>
                    <ItemsPanelTemplate>
                        <VirtualizingStackPanel Orientation="Vertical" Background="{x:Null}"/>
                    </ItemsPanelTemplate>
                </Setter.Value>
            </Setter>
            <Setter 
        Property="ScrollViewer.HorizontalScrollBarVisibility" 
        Value="Disabled" 
        />
            <Setter 
        Property="ScrollViewer.VerticalScrollBarVisibility"
        Value="Hidden" 
        />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate>
                        <DockPanel>
                            <Button x:Name="LineLeftButton" DockPanel.Dock="Top"                           
                      Command="{x:Static ScrollBar.LineUpCommand}"      
                      CommandTarget="{Binding ElementName=scrollviewer}" Margin="10,5,10,2" Cursor="Hand" IsEnabled="{TemplateBinding ScrollViewer.CanContentScroll}" Background="{x:Null}" BorderBrush="{x:Null}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Height="25" Width="25">
                                <Button.Template>
                                    <ControlTemplate TargetType="{x:Type Button}">
                                        <Grid x:Name="grid">
                                            <Image x:Name="Image" Source="../../Images/scroll_up_gallery.png" Stretch="Uniform" Height="25" Width="25"/>
                                        </Grid>
                                        <ControlTemplate.Triggers>
                                            <Trigger Property="IsMouseOver" Value="True">
                                                <Setter TargetName="grid" Property="RenderTransform" >
                                                    <Setter.Value>
                                                        <TranslateTransform Y="1.0" X="1.0"/>
                                                    </Setter.Value>
                                                </Setter>
                                            </Trigger>
                                            <Trigger Property="IsPressed" Value="True">
                                                <Setter TargetName="grid" Property="Effect" >
                                                    <Setter.Value>
                                                        <DropShadowEffect ShadowDepth="5"/>
                                                    </Setter.Value>
                                                </Setter>
                                                <Setter TargetName="grid" Property="RenderTransform" >
                                                    <Setter.Value>
                                                        <TranslateTransform Y="1.0" X="1.0"/>
                                                    </Setter.Value>
                                                </Setter>
                                            </Trigger>
                                            <Trigger Property="IsEnabled" Value="false">
                                                <Setter TargetName="grid" Property="Opacity" Value="0.5"/>
                                            </Trigger>
                                        </ControlTemplate.Triggers>
                                    </ControlTemplate>
                                </Button.Template>
                            </Button>

                            <Button x:Name="LineRightButton" DockPanel.Dock="Bottom"                       
                      Command="{x:Static ScrollBar.LineDownCommand}"      
                      CommandTarget="{Binding ElementName=scrollviewer}" Margin="10,5,10,2" Cursor="Hand" IsEnabled="{TemplateBinding ScrollViewer.CanContentScroll}" Background="{x:Null}" BorderBrush="{x:Null}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Height="25" Width="25">
                                <Button.Template>
                                    <ControlTemplate TargetType="{x:Type Button}">
                                        <Grid x:Name="grid">
                                            <Image x:Name="Image" Source="../../Images/scroll_down_gallery.png" Stretch="Uniform" Height="25" Width="25"/>
                                        </Grid>
                                        <ControlTemplate.Triggers>
                                            <Trigger Property="IsMouseOver" Value="True">
                                                <Setter TargetName="grid" Property="RenderTransform" >
                                                    <Setter.Value>
                                                        <TranslateTransform Y="1.0" X="1.0"/>
                                                    </Setter.Value>
                                                </Setter>
                                            </Trigger>
                                            <Trigger Property="IsPressed" Value="True">
                                                <Setter TargetName="grid" Property="Effect" >
                                                    <Setter.Value>
                                                        <DropShadowEffect ShadowDepth="5"/>
                                                    </Setter.Value>
                                                </Setter>
                                                <Setter TargetName="grid" Property="RenderTransform" >
                                                    <Setter.Value>
                                                        <TranslateTransform Y="1.0" X="1.0"/>
                                                    </Setter.Value>
                                                </Setter>
                                            </Trigger>
                                            <Trigger Property="IsEnabled" Value="false">
                                                <Setter TargetName="grid" Property="Opacity" Value="0.5"/>
                                            </Trigger>
                                        </ControlTemplate.Triggers>
                                    </ControlTemplate>
                                </Button.Template>
                            </Button>

                            <ScrollViewer x:Name="scrollviewer">
                                <ItemsPresenter/>
                            </ScrollViewer>

                        </DockPanel>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <Style x:Key="ItemContainerStyle" TargetType="{x:Type ListBoxItem}">
            <Setter Property="Background" Value="Transparent"/>
            <Setter Property="HorizontalContentAlignment" Value="{Binding HorizontalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
            <Setter Property="VerticalContentAlignment" Value="{Binding VerticalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
            <Setter Property="Padding" Value="1,0,0,0"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ListBoxItem}">
                        <Border x:Name="Bd" SnapsToDevicePixels="true" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Padding="{TemplateBinding Padding}" RenderTransformOrigin="0.5,0.5">
                            <Border.RenderTransform>
                                <TransformGroup>
                                    <ScaleTransform/>
                                    <SkewTransform/>
                                    <RotateTransform/>
                                    <TranslateTransform/>
                                </TransformGroup>
                            </Border.RenderTransform>
                            <ContentPresenter x:Name="cp" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsSelected" Value="true">
                                <Setter Property="Foreground" Value="White" />
                                <Setter Property="RenderTransform" TargetName="Bd">
                                    <Setter.Value>
                                        <TransformGroup>
                                            <ScaleTransform ScaleX="1.05" ScaleY="1.05"/>
                                            <SkewTransform/>
                                            <RotateTransform/>
                                            <TranslateTransform X="0" Y="0"/>
                                        </TransformGroup>
                                    </Setter.Value>
                                </Setter>
                            </Trigger>
                            <Trigger Property="IsSelected" Value="false">
                                <Setter Property="Foreground" Value="#FF827E7F" />
                            </Trigger>
                            <Trigger Property="IsEnabled" Value="false">
                                <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <Storyboard x:Key="sbHideArticle">
            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="listControlGrid" Storyboard.TargetProperty="(FrameworkElement.Width)">
                <SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="0"/>
            </DoubleAnimationUsingKeyFrames>
            <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="btnShowToolbarBar" Storyboard.TargetProperty="(UIElement.Visibility)">
                <DiscreteObjectKeyFrame KeyTime="00:00:00.2000000" Value="{x:Static Visibility.Visible}"/>
            </ObjectAnimationUsingKeyFrames>
        </Storyboard>
        <Storyboard x:Key="sbShowArticle">
            <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="btnShowToolbarBar" Storyboard.TargetProperty="(UIElement.Visibility)">
                <DiscreteObjectKeyFrame KeyTime="00:00:00" Value="{x:Static Visibility.Visible}"/>
                <DiscreteObjectKeyFrame KeyTime="00:00:00.1000000" Value="{x:Static Visibility.Hidden}"/>
            </ObjectAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="listControlGrid" Storyboard.TargetProperty="(FrameworkElement.Width)">
                <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
                <SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="180"/>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
    </UserControl.Resources>
    <UserControl.Triggers>
        <EventTrigger RoutedEvent="FrameworkElement.Loaded">
            <BeginStoryboard Storyboard="{StaticResource sbHideArticle}"/>
            <BeginStoryboard Storyboard="{StaticResource sbShowArticle}"/>
        </EventTrigger>
    </UserControl.Triggers>
    <Grid x:Name="topGrid">
        <Grid x:Name="gridLayout">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="10"/>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="10"/>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
            <Grid x:Name="gridList" Grid.Row="0" Grid.Column="1">
                <Grid x:Name="listControlGrid" Width="180" Background="#FFD7DCE0">
                    <Button x:Name="btnAutoHideBar" Margin="0,5,5,0" VerticalAlignment="Top" Grid.Column="21" HorizontalAlignment="Right" Width="15" Height="15" ToolTip="Un Pin">
                        <Button.Template>
                            <ControlTemplate TargetType="{x:Type Button}">
                                <Image x:Name="imageControlAutoHide" Stretch="Fill" Source="pack://application:,,/Quibbler - Universal News Reader;component/Images/IconAutoHideDisabled.png"/>
                            </ControlTemplate>
                        </Button.Template>
                    </Button>
                    <ListBox x:Name="listBox" ItemContainerStyle="{DynamicResource ItemContainerStyle}" Width="180" Background="#FFD7DCE0" BorderThickness="1" BorderBrush="Black" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="5,0,0,0"/>
                </Grid>
                <Image x:Name="btnShowToolbarBar" Margin="0,-10,0,0" HorizontalAlignment="Left" Stretch="Fill" VerticalAlignment="Center" Width="20" Height="100" Grid.ColumnSpan="22" Visibility="Visible" Source="pack://application:,,/Quibbler - Universal News Reader;component/Images/IconShowToolbar.png"/>
                <!--<Button x:Name="btnShowToolbarBar" Margin="0,-10,0,0" HorizontalAlignment="Left" Content="&gt;" VerticalAlignment="Center" Width="20" Height="100" Grid.ColumnSpan="22" Visibility="Hidden"/>-->
            </Grid>
            <controls:ArticleReader ZoomLevel="80"  Grid.Column="2" Grid.Row="0" x:Name="mainReader" Margin="5,0,0,0" BorderThickness="1">
            </controls:ArticleReader>
        </Grid>
        <Grid x:Name="gridNoContent" VerticalAlignment="Center" HorizontalAlignment="Center" Width="200" Height="150" Visibility="Collapsed">
            <Button x:Name="btnArticleGalleryClose" ToolTip="Close" Background="{x:Null}" BorderBrush="{x:Null}" HorizontalAlignment="Right" VerticalAlignment="Top" Height="30" Width="30" Margin="5" Click="btnCloseClick" Visibility="Collapsed">
                <Button.Template>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <Grid x:Name="grid">
                            <Image x:Name="Image" Source="pack://application:,,/Quibbler - Universal News Reader;component/Images/btn-close.png" Stretch="Fill"/>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter TargetName="grid" Property="RenderTransform" >
                                    <Setter.Value>
                                        <TranslateTransform Y="1.0" X="1.0"/>
                                    </Setter.Value>
                                </Setter>
                            </Trigger>
                            <Trigger Property="IsPressed" Value="True">
                                <Setter TargetName="grid" Property="Effect" >
                                    <Setter.Value>
                                        <DropShadowEffect ShadowDepth="5"/>
                                    </Setter.Value>
                                </Setter>
                                <Setter TargetName="grid" Property="RenderTransform" >
                                    <Setter.Value>
                                        <TranslateTransform Y="1.0" X="1.0"/>
                                    </Setter.Value>
                                </Setter>
                            </Trigger>
                            <Trigger Property="IsEnabled" Value="false">
                                <Setter TargetName="grid" Property="Opacity" Value="0.5"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Button.Template>
            </Button>
            <TextBlock x:Name="txtHeadline"  Text="Content not Available" FontSize="20" FontFamily="Georgia" TextWrapping="Wrap" FontWeight="Bold" Foreground="White" TextAlignment="Justify" VerticalAlignment="Center" HorizontalAlignment="Center"/>
        </Grid>
    </Grid>

</UserControl>
